<template>
  <view class="dy-scroll-container">
    <dy-navbar title="弹出选择" />
    <scroll-view class="dy-scroll" scroll-y>
      <!-- 基础用法 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="基础用法" />
        <template slot="body">
          <dy-button type="primary" @click="baseUsed = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
      <!-- 自定义高度 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义高度" desc="height: 400rpx" />
        <template slot="body">
          <dy-button type="primary" @click="customHeight = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
      <!-- 顶部操作栏 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="顶部操作栏" desc="toolbarPosition: 'top'" />
        <template slot="body">
          <dy-button type="primary" @click="toolbarPosition = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
      <!-- 显示标题 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="显示标题" desc="showTitle: true" />
        <template slot="body">
          <dy-button type="primary" @click="showTitle = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
      <!-- 显示取消按钮 -->
      <dy-card>
        <dy-section
          slot="title"
          padding="0"
          title="显示取消按钮"
          desc="cancel-btn: { show: true }"
        />
        <template slot="body">
          <dy-button type="primary" @click="showCancelBtn = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
      <!-- 自定义底部按钮 -->
      <dy-card>
        <dy-section slot="title" padding="0" title="自定义底部按钮" />
        <template slot="body">
          <dy-button type="primary" @click="customBtns = true">
            显示弹出选择
          </dy-button>
        </template>
      </dy-card>
    </scroll-view>
    <dy-popup-select v-model="baseUsed" />
    <dy-popup-select v-model="customHeight" height="400rpx" />
    <dy-popup-select v-model="toolbarPosition" toolbar-position="top" />
    <dy-popup-select v-model="showTitle" show-title />
    <dy-popup-select v-model="showCancelBtn" :cancel-btn="{ show: true }" />
    <dy-popup-select
      v-model="customBtns"
      :confirm-btn="{ show: true, type: 'warn', round: true }"
      :cancel-btn="{ show: true, type: 'line', round: true }"
    />
  </view>
</template>

<script>
export default {
  name: 'Select',
  data() {
    return {
      baseUsed: false,
      customHeight: false,
      toolbarPosition: false,
      showTitle: false,
      showCancelBtn: false,
      customBtns: false
    }
  }
}
</script>
